<template>
	<view class="page-index">
		<u-navbar title-color="#fff" title=" " :background="background" :border-bottom="false" :is-back="false">
			
			<view class="u-flex u-f-jsb u-f1 pl10 pr10">
				<view>
					<u-search placeholder="搜索" disabled :input-style="{'width':'50px',padding:0}" :show-action="false" @click ="toSearch"></u-search>
				</view>
				<image src="../../static/image/logo2.png" style="width: 300rpx;height: 50rpx;" mode="aspectFill"></image>
			<view style="opacity: 0;">
				<u-search placeholder="搜索" disabled :input-style="{'width':'50px',padding:0}" :show-action="false" @click ="toSearch"></u-search>
			</view>
			</view>
		</u-navbar>
		<!-- <view class="nav-logo u-f-justify" :style="{top:statusBarHeight+'px'}">
			<image src="../../static/image/logo1.png" style="width: 400rpx;" mode="widthFix"></image>
		</view> -->
		<view class="page-content" v-if="curBanner">
			<view style="position: relative;">
				<u-swiper img-mode="scaleToFill" @change="bannerChange" @click="toBanner(curBanner)" name="picUrl" :list="bannerList"
					:height="bannerHeight">
				</u-swiper>
				<view class="page-btn" @click="toBanner(curBanner)" style="height: 200rpx;">
					<view class="fz30 u-font-bold c255 u-flex u-f-justify" v-if="curBanner.title">{{curBanner.title}}
					</view>
					<view class="btn1 fz13 u-font-bold" v-if="curBanner.memo">{{curBanner.memo || ''}}</view>
				</view>
			</view>
			<view class="bg-white p12">
				<view class="u-flex u-f-jsb mt8" style="flex-wrap: wrap;">
					<view class="u-f-justify mt10" @click="toBanner(item)" v-for="(item,index) in bannerListSecond"
						:key="index">
						<image :src="item.picUrl" style="width: 342rpx;height: 194rpx;"></image>
					</view>
				</view>
			</view>
			<view class="p12">
				<view class="u-flex u-f-jsb mb20" @click="toPage('/pages/index/template')">
					<span class="u-font-bold fz15">优秀模版</span>
					<span class="u-flex fz12" style="color: #19291C;">
						更多
						<u-icon name="arrow-right"></u-icon>
					</span>
				</view>


				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter pr6" v-for="(item, index) in leftList" :key="index"
							@click="toPage('/pages/diy/index?communityId='+item.id)">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl"
								:index="index"></u-lazy-load>
							<view class="pt12 pb20 u-flex u-f-jsb">
								<view class="fz14 u-font-bold u-line-1" style="width: 200rpx;">{{item.title}}</view>
								<view class="tmp-btn fz12 u-font-bold">使用模板</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter pl6" v-for="(item, index) in rightList" :key="index"
							@click="toPage('/pages/diy/index?communityId='+item.id)">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl"
								:index="index"></u-lazy-load>
							<view class="pt12 pb20 u-flex u-f-jsb">
								<view class="fz14 u-font-bold u-line-1" style="width: 200rpx;">{{item.title}}</view>
								<view class="tmp-btn fz12 u-font-bold">使用模板</view>
							</view>
						</view>
					</template>
				</u-waterfall>

			</view>
			<view  v-if="bannerVideo.file || bannerVideo.picUrl" class="p12 pt24 pb30" style="background: rgba(25,41,28,0.03);">
				<view v-if="bannerVideo.file">

					<video controls :src="bannerVideo.file"
						style="width: 100%;height:394rpx;border-radius: 5px;"></video>
				</view>
				<image v-else :src="bannerVideo.picUrl" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view class="bg-white" style="padding-top: 70rpx;">
				<view class="module-brand" :style="{background:'url('+brandBg.picUrl+') no-repeat top center'}">
					<view class="brand-content pt50">

						<view class="u-font-bold c255" style="text-align: center;">
							<view class="fz18">{{brandBg.title}}</view>
							<view class="fz12 mt4">{{brandBg.memo}}</view>
						</view>
						<view class="mt20">
							
							<swiper @change="brandSwiper" :indicator-dots="true" style="height:500rpx;margin: 0 auto;width: 620rpx;">
								<swiper-item v-for="(item,index) in brandList" :key="index" class="brs10">
									<view class="brs10 bg-white" style="overflow: hidden;" @click="toBanner(item)">
										<image class="img" :src="item.picUrl" mode="aspectFill"
											style="width: 100%;height: 500rpx;border-radius: 5px;display: block;">
										</image>
										<!-- <view class="u-flex  p12 u-f-jsb">
											<span class="fz13 u-font-bold">{{item.title}}</span>
											<span class="c9 fz12">{{item.memo || ''}}<u-icon class="ml2"
													name="arrow-right"></u-icon></span>
										</view> -->
									</view>
								</swiper-item>
							</swiper>
							<view class="banner_dots">
								<view class="banner_dot" :class="index==currentBrand?'cur':''" v-for="(item,index) in brandList" :key="index"></view>
							</view>
						</view>

						<!-- <view class="fz12 mt10 u-flex u-f-justify c255" @click="toBanner(brandBg)">查看更多<u-icon class="ml2" name="arrow-right"></u-icon>
						</view> -->
					</view>
				</view>
			</view>
			<view class="p12 pt24 pb24">

				<view class="mt20">
					<image src="../../static/image/logo2.png"
						style="width: 388rpx;height: 64rpx;display: block;margin: 0 auto;;"></image>
				</view>
				<view class="u-flex u-f-justify mt38">

					<view class="pt2 pb2" style="border-top: 1px solid #19291C;border-bottom: 1px solid #19291C;">
						100%正品保证
					</view>
				</view>
				<view class="u-flex u-f-jsb mt40 pl20 pr20">
					<view class="u-f1" style="text-align: center;" v-for="(item,index) in otherList" :key="index"
						@click="toActOther(item)">
						<image :src="item.picUrl" class="w26 h26"></image>
						<view class="fz12 mt5">
							<view class="mb2">{{item.title}}</view>
							<view v-if="item.memo">{{item.memo}}</view>
						</view>

					</view>
				</view>
			</view>
		</view>


		<customer-service></customer-service>
		<u-popup v-model="showLogin" mode="center" border-radius="20" :closeable="false">
			<Login @close="showLogin=false" @sureLogin="showLogin=false"></Login>
		</u-popup>
		<u-tabbar active-color="#70B52C" v-model="curTab" :list="tabbarList" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import Login from "@/components/login/index.vue"
	export default {
		components: {
			Login
		},
		data() {
			return {
				background: {
					background: '#fff'
				},
				currentBrand:0,
				showLogin: false,
				keyword: '',
				curTab: 0,
				curBannerBrand: {},
				bannerVideo: {},
				search: {},
				brandList: [],
				otherList: [],
				// 选择
				statusBarHeight: 20,
				curBanner: {},
				bannerHeight: 200,

				curTab: 1,
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				brandBg: '',
				adListAll: [],
				bannerList: [],
				bannerListSecond: [],
			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.tabbarList || '';
			},
		},
		onLoad(e) {

			console.log('index:', e)
			if (e.parentId) {
				this.$db.set("parentId", e.parentId);
			}
			this.$nextTick(() => {
				this.initData()

				this.$api.adList({
					position: 1
				}, res => {
					if (res.code == 200) {
						this.bannerList = res.data;
						this.curBanner = this.bannerList[0]
					}
				})
				this.$api.adList({
					position: 2
				}, res => {
					if (res.code == 200) {
						this.bannerListSecond = res.data;
					}
				})
				this.$api.adList({
					position: 3
				}, res => {
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {

							this.bannerVideo = res.data[0];
						}
					}
				})
				this.$api.adList({
					position: 4
				}, res => {
					if (res.code == 200) {
						this.brandList = res.data;
						this.curBannerBrand = this.bannerList[0]

					}
				})


				this.$api.adList({
					position: 7
				}, res => {
					if (res.code == 200) {
						this.brandBg = res.data[0]

					}
				})
				this.$api.adList({
					position: 5
				}, res => {
					if (res.code == 200) {
						this.otherList = res.data;
					}
				})

			})
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res, 123123)
					_this.statusBarHeight = res.statusBarHeight
					_this.bannerHeight = (res.windowHeight)-70
				}
			})


		},

		onPageScroll(e) {},
		onShow() {


			this.$api.dictList({
				dictType: 'tabbar_logo'
			}, res => {
				if (res.code == 200) {
					this.tabbarList[2].iconPath = res.data[0].remark
					this.tabbarList[2].selectedIconPath = res.data[0].remark
				}
			})
		},

		methods: {
			toSearch(){
				uni.navigateTo({
					url:'/pages/product/search'
				})
			},
			brandSwiper(e){
				this.currentBrand=e.detail.current
			},
			toActOther(item) {
				if (!item.url) {
					return
				}

				if (item.url.indexOf('http') >= 0) {
					uni.navigateTo({
						url: `/pages/webview/webview?src=${item.url}`
					})
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			getCoupon(id) {

				this.$api.couponTake({
					templateId: id
				}, res => {
					if (res.code == 200) {
						this.$common.errorToShow('领取成功！')
					} else {

						this.$common.errorToShow(res.message)
					}
				})


			},
			toBanner(item) {
				if (!this.$db.get("userToken")) {
					this.showLogin = true
					return
				}
				if (item.couponTemplateId) {
					this.getCoupon(item.couponTemplateId)
					return
				}
				console.log(item, 121221)
				if (item.url && item.url.indexOf('http') >= 0) {
					uni.navigateTo({
						url: `/pages/webview/webview?src=${item.url}`
					})
				} else {
					if (item.url == '/pages/product/index' || item.url == '/pages/activity/index') {
						uni.switchTab({
							url: item.url
						})
						return
					}
					console.log(item.url, 121221)
					uni.navigateTo({
						url: item.url
					})
				}
			},
			bannerBrandChange(e) {
				this.curBannerBrand = this.brandList[e]
			},
			bannerChange(e) {
				this.curBanner = this.bannerList[e]
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			initData() {
				this.$api.excellentList({
					pageNo: 1,
					pageSize: 4
				}, res => {
					if (res.code == 200) {
						this.flowList = res.data.list
					}
				})


			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.nav-logo {
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 10;
		right: 0;
		padding: 20rpx 40rpx
	}

	.page-btn {

		position: absolute;
		bottom:70px;
		left: 0;
		right: 0;
		z-index: 10;
		padding: 30rpx;
		text-align: center;


		.btn1 {

			text-align: center;
			color: #fff;
			display: inline-block;
			margin: 40rpx auto 0;
			padding: 12rpx 64rpx;
			border: 1px solid #fff;
			border-radius: 40px;
		}

	}

	.tmp-btn {
		width: 128rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: rgba(44, 153, 66, 0.1);
		border-radius: 8rpx;

		color: #70B52C;
	}

	.page-index {
		position: relative;
	}

	.page-content {
		position: relative;
		z-index: 2
	}

	.module-brand {
		border-radius: 6px;
		height: 842rpx;
		background-size: contain;

		::v-deep .wx-swiper-dots-horizontal {
			top: 600rpx !important;
			transform: translate(0%) !important;
			height: 0rpx;
		}
	}
	
	
	.banner_dots{
		// position: absolute;
		// left: 50%;
		// transform: translate(-50%,0);
		// width: 100%;
		// bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		margin-top: 30rpx;
		.banner_dot{
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #fff;
			margin: 0 10rpx;
			transition: all .5s;
		}
		.banner_dot.cur{
			background-color: #fff;
			width: 40rpx;
			border-radius: 5rpx;
		}
	}
</style>